<template>
	<view class="container box">
		<view class="sections">
			<block v-for="item in personInfos">
				<view class="section" @click="handleDialog1('体重','kg')" v-if="item.label=='weigh'">
					体重<label style="color:#A9A9A9">(kg)</label>
					<view class="info-value">
						{{formData.weigh}}
					</view>
				</view>
				<view class="section" @click="handleDialog1('身高', 'cm') " v-else-if="item.label=='height'">
					身高<label style="color:#A9A9A9">(cm)</label>
					<view class="info-value">
						{{formData.height}}
					</view>
				</view>
				<view class="section" v-else-if="item.label=='birthdate'" @click="changeDate">
					<label>{{getLabel(item.label)}}</label>
					<view class="info-value">
						{{formData.birthdate}}
					</view>
				</view>
				<view class="section" v-else @click="handleDialog2(item.label)">
					<label>{{getLabel(item.label)}}</label>
					<view class="info-value">
						{{formData[item.label]}}
					</view>
				</view>
			</block>
		</view>
		<view class="btn-save">
		</view>
		<healthInput @delay='delayDialog1' :inputLabel='inputLabel1' :inputUnit='inputUnit' class="diglog-input1"
			v-if="showDigInput1">
		</healthInput>
		<inputVue @delay='delayDialog2' :inputLabel='inputLabel2' class="diglog-input2" v-if="showDigInput2">
		</inputVue>
		<view class="diglog-input3" v-if="showDigInput3">
			<uni-datetime-picker :clear-icon="false" type="date" @change="saveDate"
				v-model="formData.birthdate"></uni-datetime-picker>
		</view>
	</view>
</template>
<script>
	import inputVue from '../../../components/inputVue.vue'
	import healthInput from '../../../components/healthInput.vue'
	import {
		check,
		getUser,
		verify
	} from '../../../database/index.js'
	export default {
		components: {
			healthInput,
			inputVue
		},
		data() {
			return {
				updateIndex: 0,
				formData: {
					height: '',
					weigh: '',
					email: '',
					name: '',
					account: '',
					birthdate: ''
				},
				inputLabel1: '',
				inputLabel2: '',
				inputUnit: '',
				personInfos: '',
				showDigInput1: false,
				showDigInput2: false,
				showDigInput3: false
			}
		},
		async onPullDownRefresh() {
			this.formData = {}
			this.personInfos = await getUser({
				_id: this.$store.getters.getToken
			})
			for (let data of this.personInfos) {
				this.formData[data.label] = data.value
			}
		},
		methods: {
			async saveDate() {
				let [dadd, dmsg] = await verify('user', {
					_id: this.$store.getters.getToken
				}, {
					birthdate: new Date(this.formData.birthdate)
				})
				if (dadd) {
					this.$showMsg('修改出生日期成功')
					this.$forceUpdate()
				}
				this.showDigInput3 = false
			},
			changeDate() {
				this.showDigInput3 = true
				this.showDigInput1 = false
				this.showDigInput2 = false
			},
			handleDialog1(label, unit) {
				this.inputLabel1 = label
				this.inputUnit = unit
				this.showDigInput1 = true
				this.showDigInput2 = false
				this.showDigInput3 = false
			},
			handleDialog2(label) {
				if (label != 'id') {
					this.inputLabel2 = this.getLabel(label)
					this.showDigInput2 = true
					this.showDigInput1 = false
					this.showDigInput3 = false
				}
			},
			async delayDialog1(...data) {
				this.showDigInput1 = false
				if (data.length > 2 && data[1] == '身高') {
					let [hadd, hmsg] = await verify('user', {
						_id: this.$store.getters.getToken
					}, {
						height: data[2]
					})
					if (hadd) {
						this.formData.height = data[2]
						this.$showMsg('修改身高成功')
					} else {
						this.$showMsg('修改身高失败')
					}
				} else if (data.length > 2 && data[1] == '体重') {
					let [wadd, wmsg] = await verify('user', {
						_id: this.$store.getters.getToken
					}, {
						weigh: data[2]
					})
					if (wadd) {
						this.formData.weigh = data[2]
						this.$showMsg('修改体重成功')
					} else {
						this.$showMsg('修改体重失败')
					}
				}
				this.$forceUpdate()
				console.log(this.formData);
			},
			async delayDialog2(...data) {
				this.showDigInput2 = false
				if (data.length > 2) {
					if (data[1].includes('手机号')) {
						let [isphone, phonemsg] = await check('user', [{
							user_account: data[2]
						}])
						if (!isphone) {
							this.$showMsg('该手机号已存在')
							return
						} else {
							let [padd, paddmsg] = await verify('user', {
								_id: this.$store.getters.getToken
							}, {
								user_account: data[2]
							})
							if (padd) {
								this.formData.account = data[2]
								this.$showMsg('修改手机号成功')
							} else {
								this.$showMsg('修改手机号失败')
							}
						}

					} else if (data[1].includes('昵称')) {
						let [nameadd, nameaddmsg] = await verify('user', {
							_id: this.$store.getters.getToken
						}, {
							user_name: data[2]
						})
						if (nameadd) {
							this.$store.commit('setUserName', data[2])
							this.formData.name = data[2]
							this.$showMsg('修改昵称成功')
						} else {
							this.$showMsg('修改昵称失败')
						}
					} else if (data[1].includes('邮箱')) {
						let [isemail, emailmsg] = await check('user', [{
							user_email: data[2]
						}])
						if (!isemail) {
							this.$showMsg('该邮箱已存在')
							return
						} else {
							let [emadd, emaddmsg] = await verify('user', {
								_id: this.$store.getters.getToken
							}, {
								user_email: data[2]
							})
							if (emadd) {
								this.formData.email = data[2]
								this.$showMsg('修改邮箱成功')
							} else {
								this.$showMsg('修改邮箱失败')
							}
						}
					}
				}
				this.$forceUpdate()
				console.log(this.formData);
			},
			getLabel(val) {
				switch (val) {
					case 'id':
						return '用户ID'
					case 'name':
						return '用户昵称'
					case 'height':
						return '身高'
					case 'birthdate':
						return '生日'
					case 'email':
						return '用户邮箱'
					case 'account':
						return '手机号'
					case 'weigh':
						return '体重'
				}
			}
		},
		async onLoad() {
			this.formData = {}
			this.personInfos = await getUser({
				_id: this.$store.getters.getToken
			})
			for (let data of this.personInfos) {
				this.formData[data.label] = data.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: relative;
		padding: 0;
	}

	.diglog-input1 {
		position: absolute;
		top: 20%;
		left: 25%;
	}

	.diglog-input2 {
		@extend .diglog-input1;
		left: 20%;
	}

	.diglog-input3 {
		@extend .diglog-input1;
		left: 32%;
		width: 300rpx;
	}

	.uni-date {
		width: 40%;
	}

	.section {
		position: relative;
		color: #292929;
		padding: 20rpx 30rpx;
		padding-right: 30rpx;
		border-bottom: 2rpx solid #e7e7e7;
		background-color: white;

		.info-value {
			position: absolute;
			right: 60rpx;
			top: 20rpx;
		}

		&:last-child {
			border-bottom: none;
		}

		&::after {
			content: '>';
			font-weight: 600;
			color: #d8d8d8;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
	}

	.btn-save {
		position: absolute;
		bottom: 10%;
		margin-top: 100rpx;
		width: 100%;

		button {
			letter-spacing: 4rpx;
			text-align: center;
			background-color: #292929;
			width: 300rpx;
		}
	}
</style>